<template>
  <div class="page">
    <SelfAdaption width="1920" height="1080" mode="auto">
      <AutoRow class="page-view max-size" mode="column" style="overflow:hidden;">
        <AutoCol class="page-header" items="center">
          <img src="./img/top-title.png" style="width:100%; height:100%;" alt="">
          <AutoRow class="header-left-box" items="center">
            <AutoCol class="location">南湖区</AutoCol>
            <AutoCol class="weather" sitems="center" v-if="weather">
              <span class="middle">
                <img v-if="weather.code < 4" style="width: 22px;height: 22px;" src="./img/weather/qing.png" />
                <img v-else-if="weather.code < 9" style="width: 22px;height: 22px;" src="./img/weather/duoyun.png" />
                <img v-else-if="weather.code == 9" style="width: 22px;height: 22px;" src="./img/weather/yintian.png" />
                <img v-else-if="weather.code < 13" style="width: 22px;height: 22px;" src="./img/weather/zhenyu.png" />
                <img v-else-if="weather.code == 13" style="width: 22px;height: 22px;" src="./img/weather/xiaoyu.png" />
                <img v-else-if="weather.code == 14" style="width: 22px;height: 22px;" src="./img/weather/zhongyu.png" />
                <img v-else-if="weather.code < 20" style="width: 22px;height: 22px;" src="./img/weather/dayu.png" />
                <img v-else-if="weather.code == 20" style="width: 22px;height: 22px;" src="./img/weather/yujiaxue.png" />
                <img v-else-if="weather.code < 23" style="width: 22px;height: 22px;" src="./img/weather/xiaoxue.png" />
                <img v-else-if="weather.code == 23" style="width: 22px;height: 22px;" src="./img/weather/zhongxue.png" />
                <img v-else-if="weather.code < 26" style="width: 22px;height: 22px;" src="./img/weather/daxue.png" />
              </span>
              <span style="margin-left:10px;">{{ weather.text }}</span>
            </AutoCol>
          </AutoRow>
          <AutoRow class="header-right-box" items="center">
            <AutoCol class="hh-ii-ss">{{ currentDate.H_I_S || '--:--:--' }}</AutoCol>
            <AutoCol class="yyyy-mm-dd">{{ currentDate.Y || '--' }}年{{ currentDate.M || '--' }}月{{ currentDate.D || '--' }}日&emsp;星期{{ currentDate.W || '--' }}</AutoCol>
          </AutoRow>
        </AutoCol>
        <AutoCol class="page-content" size="auto">
          <AutoRow class="max-size">
            <AutoCol class="page-left-box" size="1 0 450px">
              <AutoRow class="max-size" mode="column">
                <AutoCol size="1 0 330px">
                  <AutoRow class="zczgtj max-size module-box" mode="column">
                    <AutoCol class="module-title">助餐资格统计</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <AutoRow class="max-size" mode="column">
                        <AutoCol class="list-data-info" justify="between" items="center">
                          <AutoRow class="data-info" items="center">
                            <AutoCol class="label">已申请</AutoCol>
                            <AutoCol class="value">
                              <AnimatedInteger :value="parseFloat(21245)" thousands></AnimatedInteger>
                            </AutoCol>
                          </AutoRow>
                          <AutoRow class="data-info" items="center">
                            <AutoCol class="label">已通过</AutoCol>
                            <AutoCol class="value">
                              <AnimatedInteger :value="parseFloat(1245)" thousands></AnimatedInteger>
                            </AutoCol>
                          </AutoRow>
                        </AutoCol>
                        <AutoCol size="auto" justify="center" items="center">
                          <EchartComponent class="echart" @register="zczgtjEchart.registerEchart" style="width:450px; height:204px;"></EchartComponent>
                        </AutoCol>
                      </AutoRow>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
                <AutoCol size="1 0 330px">
                  <AutoRow class="max-size module-box" mode="column">
                    <AutoCol class="module-title">资金结算统计</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <EchartComponent @register="zjjstjEchart.registerEchart"></EchartComponent>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
                <AutoCol size="0 0 240px">
                  <AutoRow class="zfbtntj max-size module-box" mode="column">
                    <AutoCol class="module-title">政府补贴年统计</AutoCol>
                    <AutoCol class="module-content list" size="auto" mode="column" justify="around">
                      <AutoRow class="list-item" items="center"> 
                        <AutoCol class="icon-wrapper">
                          <img class="icon" src="./img/bnbt.png" alt="">
                        </AutoCol>
                        <AutoCol size="auto">
                          <AnimatedInteger :value="parseFloat(216)" thousands v-slot="{value, thousandsValue}">
                            <AutoRow justify="between" items="center">
                              <AutoCol class="label">本年补贴</AutoCol>
                              <AutoCol class="value">{{ thousandsValue }}万元</AutoCol>
                            </AutoRow>
                            <div class="progress-icon"></div>
                            <div class="progress-bar-box">
                              <div class="progress-bar" :style="`width:${parseFloat(value)/538*100}%;`"></div>
                            </div>
                          </AnimatedInteger>                          
                        </AutoCol>
                      </AutoRow>
                      <AutoRow class="list-item" items="center"> 
                        <AutoCol class="icon-wrapper">
                          <img class="icon" src="./img/qnbt.png" alt="">
                        </AutoCol>
                        <AutoCol size="auto">
                          <AnimatedInteger :value="parseFloat(322)" thousands v-slot="{value, thousandsValue}">
                            <AutoRow justify="between" items="center">
                              <AutoCol class="label">去年年补贴</AutoCol>
                              <AutoCol class="value">{{ thousandsValue }}万元</AutoCol>
                            </AutoRow>
                            <div class="progress-icon progress-icon2"></div>
                            <div class="progress-bar-box progress-bar-box2">
                              <div class="progress-bar" :style="`width:${parseFloat(value)/538*100}%;`"></div>
                            </div>
                          </AnimatedInteger>                          
                        </AutoCol>
                      </AutoRow>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
              </AutoRow>
            </AutoCol>
            <AutoCol class="page-center-box" size="1 0 920px">
              <AutoRow class="max-size" mode="column">
                <AutoCol size="0 0 68px">
                  <AutoRow class="total-box max-size" justify="around">
                    <AutoCol class="total-item">
                      <div class="label middle">
                        <img class="icon" src="./img/title-tip.png" alt="">
                        <span>老年食堂统计</span>
                      </div>
                      <div class="value">
                        <AnimatedInteger :value="parseFloat(1245)" thousands></AnimatedInteger>
                        <span>家</span>
                      </div>
                    </AutoCol>
                    <AutoCol class="total-item">
                      <div class="label middle">
                        <img class="icon" src="./img/title-tip.png" alt="">
                        <span>助餐机构统计</span>
                      </div>
                      <div class="value">
                        <AnimatedInteger :value="parseFloat(1245)" thousands></AnimatedInteger>
                        <span>家</span>
                      </div>
                    </AutoCol>
                    <AutoCol class="total-item">
                      <div class="label middle">
                        <img class="icon" src="./img/title-tip.png" alt="">
                        <span>户籍老人统计</span>
                      </div>
                      <div class="value">
                        <AnimatedInteger :value="parseFloat(1245)" thousands></AnimatedInteger>
                        <span>人</span>
                      </div>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
                <AutoCol size="1 1 auto" justify="center" items="center" style="margin-top:20px;">
                  <div class="map-box" ref="map">
                    <div class="item-name"
                        v-for="(item,i) of marks"
                        :class="{map_mark_select:item.name == (selectMarker ? selectMarker.name : null)}"
                        :style="`left:${item.x || 0}px; top:${item.y || 0}px;`"
                    >
                        <div 
                          class="title-2" 
                          :style="`transform:translateX(-50%) translateY(-50%) rotate(${item.rotate||0}deg);`"
                          @click="nextMarker(item)" 
                          v-html="item.name.replace(/\n/g,'<br class=\'br\'>')"
                        ></div>
                    </div>
                    <div class="map-mark" v-for="(item, i) of markerArr" :key="i"
                      :class="{ map_mark_select: item.id == (selectMarker ? selectMarker.id : null) }"
                      :style="`left:${item.x || 0}px; top:${item.y || 0}px;`">
                      <div class="map-mark-title" @click.stop="nextSelectMarker(item)">
                        <div style="background-color:rgba(16, 193, 209, 1); padding:2px 20px;">{{ item.name }}</div>
                        <div class="content-wrapper-a">
                          <div class="content-wrapper-b">
                            <div style="background-color:rgba(15, 104, 120, .7); padding:5px 20px;">
                              <p>服务量：{{ item.data1 }}</p>
                              <p style="margin-top:5px;">补贴金额：{{ item.data2 }}</p>
                              <p style="margin-top:5px;">交易金额：{{ item.data3 }}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div :style="`height:${item.height || 186}px`" class="map-mark-icon-1"
                        @click.stop="nextSelectMarker(item)"></div>
                      <div class="map-mark-icon-2" @click.stop="nextSelectMarker(item)"></div>
                    </div>
                  </div>
                </AutoCol>
                <AutoCol size="0 0 200px" style="margin-top:-30px;">
                  <AutoRow class="zxscqk max-size module-box" mode="column">
                    <AutoCol class="module-title">最新送餐情况</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <ul class="list float-clear">
                        <li class="list-item float-left"
                          v-for="item of 4"
                        >
                          <div class="list-item-wrapper">
                            <div class="list-header">2024-01-01 12:00:00</div>
                            <div class="list-content">
                              <div class="list-data-info">{{ toPrivacy('黄小明',1,2) }}</div>
                              <div class="list-data-info">11元套餐(堂食)</div>
                              <div class="list-data-info text-line-1">
                                <el-tooltip
                                  content="xxxxxxxxxx餐厅"
                                  placement="top"
                                >xxxxxxxxxx餐厅</el-tooltip>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
              </AutoRow>
            </AutoCol>
            <AutoCol class="page-right-box" size="1 0 450px" >
              <AutoRow class="max-size" mode="column">
                <AutoCol size="0 0 220px">
                  <AutoRow class="ddhztj max-size module-box" mode="column">
                    <AutoCol class="module-title">订单汇总统计</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <AutoRow class="list max-size" wrap="wrap">
                        <AutoCol class="list-item" size="0 0 50%" items="center">
                          <img class="icon" src="./img/dc-icon.png" alt="">
                          <div>
                            <div class="value">
                              <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                            </div>
                            <div class="label">今日订单数</div>
                          </div>
                        </AutoCol>
                        <AutoCol class="list-item" size="0 0 50%" items="center">
                          <img class="icon" src="./img/dc-icon.png" alt="">
                          <div>
                            <div class="value">
                              <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                            </div>
                            <div class="label">本月订单数</div>
                          </div>
                        </AutoCol>
                        <AutoCol class="list-item" size="0 0 50%" items="center">
                          <img class="icon" src="./img/dc-icon.png" alt="">
                          <div>
                            <div class="value">
                              <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                            </div>
                            <div class="label">本年订单数</div>
                          </div>
                        </AutoCol>
                        <AutoCol class="list-item" size="0 0 50%" items="center">
                          <img class="icon" src="./img/dc-icon.png" alt="">
                          <div>
                            <div class="value">
                              <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                            </div>
                            <div class="label">累计订单数</div>
                          </div>
                        </AutoCol>
                      </AutoRow>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
                <AutoCol size="1 0 430px">
                  <AutoRow class="zcfltj max-size module-box" mode="column">
                    <AutoCol class="module-title">助餐分类统计</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <AutoRow class="max-size" mode="column">
                        <AutoCol class="module-content-header" size="0 0 100px" style="margin-top:20px;">
                          <AutoRow class="max-size">
                            <AutoCol class="yd" size="0 0 50%" items="center">
                              <img class="icon" src="./img/yuding.png" alt="">
                              <div>
                                <div class="value">
                                  <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                                </div>
                                <div class="label">预定</div>
                              </div>
                            </AutoCol>
                            <AutoCol class="ts" size="0 0 50%" items="center">
                              <img class="icon" src="./img/tangshi.png" alt="">
                              <div>
                                <div class="value">
                                  <AnimatedInteger :value="parseFloat(98259)" thousands></AnimatedInteger>
                                </div>
                                <div class="label">预定</div>
                              </div>
                            </AutoCol>
                          </AutoRow>
                        </AutoCol>
                        <AutoCol size="1 0 auto">
                          <AutoRow class="max-size">
                            <AutoCol size="0 0 50%" justify="center" items="center">
                              <EchartComponent @register="ydEchart.registerEchart" style="width:225px; height:250px;"></EchartComponent>
                            </AutoCol>
                            <AutoCol size="0 0 50%" justify="center" items="center">
                              <EchartComponent @register="tsEchart.registerEchart" style="width:225px; height:250px;"></EchartComponent>
                            </AutoCol>
                          </AutoRow>
                        </AutoCol>
                      </AutoRow>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
                <AutoCol size="1 0 290px">
                  <AutoRow class="max-size module-box" mode="column">
                    <AutoCol class="module-title">助餐套餐统计</AutoCol>
                    <AutoCol class="module-content" size="auto">
                      <EchartComponent @register="zctctjEchart.registerEchart"></EchartComponent>
                    </AutoCol>
                  </AutoRow>
                </AutoCol>
              </AutoRow>
            </AutoCol>
          </AutoRow>
        </AutoCol>
      </AutoRow>
    </SelfAdaption>
  </div>
</template>

<script lang="ts" setup>
import {
  $http
} from "@/http"

import {
  computed,
  watch,
  watchEffect,
  watchPostEffect,
  watchSyncEffect,

  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,

  onBeforeUpdate,
  onUpdated,

  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  onServerPrefetch,

  ref,
  reactive,
  readonly,
  useSlots,
  useAttrs,
  nextTick
} from "vue"

import {
  timestampToDate,
  fromDefaultData,
  toPrivacy,
} from "@/utils"

import {
  useInterval,
  useTimeout
} from "@/use"

import {
  EchartComponent,
  useEchart,
  $echarts,
  tooltip
} from '@/Echarts'

//南湖区天气
const weather = ref(null)
$http.post('nursing/touchScreen/weather', null, { cityName: "南湖区" }).then(res => {
  weather.value = res;
})

const currentDate = ref({});
useInterval(() => {
  currentDate.value = timestampToDate(Date.now())
}, 1000)

//助餐资格统计
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, i) {
	// 计算
	let midRatio = (startRatio + endRatio) / 2;

	let startRadian = startRatio * Math.PI * 2;
	let endRadian = endRatio * Math.PI * 2;
	let midRadian = midRatio * Math.PI * 2;

	// 如果只有一个扇形，则不实现选中效果。
	if (startRatio === 0 && endRatio === 1) {
		isSelected = false;
	}

	// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
	k = typeof k !== "undefined" ? k : 1 / 3;

	// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
	let offsetX = isSelected ? Math.cos(midRadian) * 0.3 : 0;
	let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
	let offsetZ = i == 1 ? 2 : 0;
	// 计算高亮效果的放大比例（未高亮，则比例为 1）
	let hoverRate = isHovered ? 1.05 : 1.4;

	// 返回曲面参数方程
	return {
		u: {
			min: -Math.PI,
			max: Math.PI * 3,
			step: Math.PI / 32
		},

		v: {
			min: 0,
			max: Math.PI * 2,
			step: Math.PI / 20
		},

		x: function (u, v) {
			if (u < startRadian) {
				return (
					offsetX +
					Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
				);
			}
			if (u > endRadian) {
				return (
					offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
				);
			}
			return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
		},

		y: function (u, v) {
			if (u < startRadian) {
				return (
					offsetY +
					Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
				);
			}
			if (u > endRadian) {
				return (
					offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
				);
			}
			return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
		},

		z: function (u, v) {
			if (u < -Math.PI * 0.5) {
				return offsetZ + Math.sin(u);
			}
			if (u > Math.PI * 2.5) {
				return offsetZ + Math.sin(u);
			}
			// 调整扇形高度
			return offsetZ + (Math.sin(v) > 0 ? 0.1 * h : -1);
		}
	};
}
// 生成模拟 3D 饼图的配置项
function getSeriesPie3D(pieData, internalDiameterRatio) {
	let series = [];
	let sumValue = 0;
	let startValue = 0;
	let endValue = 0;
	let k =
		typeof internalDiameterRatio !== "undefined" ?
			(1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
			1 / 3;

	// 为每一个饼图数据，生成一个 series-surface 配置
	for (let i = 0; i < pieData.length; i++) {
		sumValue += pieData[i].value;

		let seriesItem = {
			name: typeof pieData[i].name === "undefined" ?
				`series${i}` : pieData[i].name,
			type: "surface",
			parametric: true,
			wireframe: {
				show: false
			},
			pieData: pieData[i],
			pieStatus: {
				selected: false,
				hovered: false,
				k: k
			}
		};

		if (typeof pieData[i].itemStyle != "undefined") {
			let itemStyle = {};

			typeof pieData[i].itemStyle.color != "undefined" ?
				(itemStyle.color = pieData[i].itemStyle.color) :
				null;
			typeof pieData[i].itemStyle.opacity != "undefined" ?
				(itemStyle.opacity = pieData[i].itemStyle.opacity) :
				null;

			seriesItem.itemStyle = itemStyle;
		}
		series.push(seriesItem);
	}

	// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
	// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
	for (let i = 0; i < series.length; i++) {
		endValue = startValue + series[i].pieData.value;

		series[i].pieData.startRatio = startValue / sumValue;
		series[i].pieData.endRatio = endValue / sumValue;
		series[i].parametricEquation = getParametricEquation(
			series[i].pieData.startRatio,
			series[i].pieData.endRatio,
			true,
			false,
			k,
			// 调整扇形高度
			i === 0 ? 10 : 10,
			i
		);
		startValue = endValue;
	}


	series.push({
		name: '',
		type: 'pie',
		label: {
      show:true,
			formatter: '{label|{b}}\n{value|{d}%({c})}',
			// lineHeight: 22,
      rich: {
        label: {
          width:0,
          fontSize: 14,
          color: 'rgba(255, 255, 255, 1)',
          marginTop:0,
          padding:[0,0,4,0]
        },
        value:{
          fontSize: 16,
          color: 'rgba(88, 233, 255, 1)',
          padding:[4,0,0,0]
        },
      }
		},
		labelLine: {
        normal: {
            length: 30,
            // length2: 150,
            lineStyle: {
                // color: '#e6e6e6'
            }
        }
    },
		startAngle: 20, //起始角度，支持范围[0, 360]。
		clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
		// radius: ['0%', '70%'],
		center: ['50%', '50%'],
    height: '125%',
    width: '125%',	
    left:"-12.5%",
    top:"-20%",
		data: pieData,
		itemStyle: {
			opacity: 1,
      color:"rgba(0,0,0,0)"
		},
	});
	return series;
}
const scatterData = [];
function getParametricEquations(
  startRatio,
  endRatio,
  isSelected,
  isHovered,
  k,
  height,
  i
) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;

  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;

  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }

  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== "undefined" ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  let offsetZ = i == 1 ? 2 : 0;
  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u, v) {
      if (u < startRadian) {
        return (
          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u, v) {
      if (u < startRadian) {
        return (
          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u);
      }
      return Math.sin(v) > 0 ? 1 * height : -1;
    },
  };
}
function getPie3D(pieData, internalDiameterRatio) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let k =
    typeof internalDiameterRatio !== "undefined"
      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
      : 1 / 3;

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;

    let seriesItem = {
      name:
        typeof pieData[i].name === "undefined"
          ? `series${i}`
          : pieData[i].name,
      type: "surface",
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      itemStyle: {
        color: colors[i], // 自定义颜色
        opacity: '0.7'
      },
      pieStatus: {
        selected: false,
        hovered: false,
        k: k,
      },
    };

    if (typeof pieData[i].itemStyle != "undefined") {
      let itemStyle = {};

      typeof pieData[i].itemStyle.color != "undefined"
        ? (itemStyle.color = pieData[i].itemStyle.color)
        : null;
      typeof pieData[i].itemStyle.opacity != "undefined"
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null;

      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;
    console.log(series[i]);
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquations(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      // 调整扇形高度
      i === 0 ? 10 : 10,
      i,
      series[i].pieData.value
    );

    startValue = endValue;

    legendData.push(series[i].name);
  }
  return series;
}

let difZczgtjEchartData = [
  {name:"普惠", value:123},
  {name:"特惠", value:30},
]
let colors = ["rgba(53, 181, 255, 1)", "rgba(255, 177, 60, 1)"]
const zczgtjEchart = useEchart({
  legend: {
    show: true,
    orient: 'horizontal',
    top: "80%",
    itemGap: 40,
    itemHeight: 8,
    itemWidth: 17,
    itemRadius: 20,
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 12,
      rich: {
        name: {
          color: 'rgba(255,255,255,.7)',
          fontSize: 14,
          padding: [5, 0, 0, 2],
        },
        p: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 5],
        },
        v: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 10],
        }
      },
    },
    formatter: function (name) {
      let data = difZczgtjEchartData;
      console.log(data,'datas')
      let total = 0;
      data.forEach(item => {
        total += parseInt(item.value);
      })
      let currentValue = data.find(item => item.name === name).value;
      return [
        `{name|${name}}`,
        `{v|${(currentValue || 0).toString().replace(/(?<=^\d*)(\d)(?=(?:\d{3})+(?:[^\d].+)?$)/g, '$1,')}}`,
        `{p|(${total == 0 ? 0 : parseFloat((currentValue / total * 100).toFixed(2))}%)}`,
      ].join('')
    },
  },
  animation: true,
  tooltip:{
    ...tooltip,
    trigger: 'item',
    formatter(a){
      let value = difZczgtjEchartData[a.componentIndex].value
      let total = 0;
      difZczgtjEchartData.forEach(item => {
        total += parseFloat(item.value);
      })
      let currentValue = difZczgtjEchartData.find(item => item.name === a.seriesName).value;
      let per = total == 0 ? '0%' : parseFloat((currentValue / total * 100).toFixed(2))+'%'
      console.log(per,'per')
      return  `
          <div style="padding:12px 20px 12px 12px; position:relative; background-color: rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);">
              <div style="position:absolute; left:0; top:0; right:0; bottom:0; background-color: #a2d1f0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 21.5px, calc(100% - 21.5px) 2px, 2px 2px, 2px calc(100% - 2px), 0 calc(100% - 2px))"></div>
              <div style="display:flex; align-items:center;">
                  <div style="transform:translateY(-2px) scale(1.4);">${a.marker}</div>
                  <div class="flex-1" style="margin:0 10px; font-size:20px;">${a.seriesName}:</div>
                  <div style="color:#6ce3fb; font-size:20px;">${value}</div>
                  <div style="color:#6ce3fb; font-size:20px;margin-left:20px">${per}</div>
              </div>
          </div>
      `;
    }
  },
  title: {
    x: "center",
    top: "20",
    textStyle: {
      color: "#fff",
      fontSize: 22,
    },
  },
  labelLine: {
    show: true,
    lineStyle: {
      color: "#7BC0CB",
    },
    normal: {
      show: false,
      length: 10,
      length2: 10,
    },
  },
  label: {
    show: true,
    position: "outside",
    // formatter: "{b} {d}%",
    formatter: function (optionsData) {
      console.log('optionsData', optionsData)
      return (
        "{name|" +
        optionsData.name +
        "}" +
        " {value|" +
        optionsData.percent.toFixed(0) +
        "%}"
      );
    },
    rich: {
      name: {
        fontSize: 14,
        color: "#ffffff",
      },
      value: {
        fontSize: 14,
        color: "#ffffff",
      },
    },
    textStyle: {
      color: "#fff",
      fontSize: "14px",
    },
  },
  xAxis3D: {
    min: -1,
    max: 1,
  },
  yAxis3D: {
    min: -1,
    max: 1,
  },
  zAxis3D: {
    min: -1,
    max: 1,
  },
  grid3D: {
    show: false,
    boxHeight: 2,
    top: '-20%',
    left: "center",
    //bottom: "80%",
    // environment: "rgba(255,255,255,0)",
    viewControl: {
      distance: 250,
      alpha: 30,
      beta: 15,
      autoRotate: false, // 自动旋转
      rotateSensitivity:0,
      zoomSensitivity:0
    },
  }
}, (data, option) => {
    difZczgtjEchartData = data
    option.series = getPie3D(data, 0);
})
zczgtjEchart.updata(difZczgtjEchartData);

// 资金结算统计
let defZjjstjEchartData = {
  labels:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  values:[
    {
      name:"补贴",
      value:[122,123,441,356,375,834,523,778,847,3467,123,1234],
    },
    {
      name:"自费",
      value:[122,123,441,356,375,834,523,778,847,3467,123,1234],
    }
  ]
}
const zjjstjEchart = useEchart({
  tooltip: {
    ...tooltip,
    // trigger: 'item'
  },
  color: [
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(0, 138, 255, 1)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(0, 138, 255, 0.06)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(255, 177, 60, 1)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(255, 177, 60, .2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    },
  ],
  grid:[
    {
      left:10,
      right:10,
      bottom:40,
      containLabel:true,
    }
  ],
  xAxis:[
    {
      type: 'category',
      axisTick: { show: false },
      axisLine: {
        show:true,
        lineStyle:{
          color:"rgba(153, 205, 255, 1)",
        }
      },
      axisLabel:{
        color:"rgba(189, 221, 255, .6)",
        fontSize:12,
        interval:0,
      },
      data: []
    }
  ],
  yAxis:[
    {
      type: 'value',
      minInterval:1,
      min:0,
      splitLine:{
        show:true,
        lineStyle:{
          color:"rgba(153, 205, 255, .3)",
        }
      },
      axisLine: {
        show:true,
        lineStyle:{
          color:"rgba(153, 205, 255, 1)",
        }
      },
      axisLabel:{
        color:"rgba(189, 221, 255, .6)",
        fontSize:12,
      }
    }
  ],
  legend: {
    show: true,
    type: 'scroll',
    // icon: "circle",
    // orient: "vertical",
    top: 20,
    left: "center",
    itemGap: 50,
    itemWidth: 16,
    itemHeight: 10,
    textStyle:{
      color:"rgba(255, 255, 255, 1)",
      fontSize:14,
    },
    data:[

    ]
  },
  series: [
    {
      name: '补贴',
      type: 'bar',
      barMaxWidth:30,
      barWidth:10,
      // emphasis: {
      //   focus: 'series'
      // },
      data: []
    },
    {
      name: '自费',
      type: 'bar',
      barMaxWidth:30,
      barWidth:10,
      // emphasis: {
      //   focus: 'series'
      // },
      data: []
    },
  ]
}, (data, option) => {
  option.xAxis[0].data = data.labels;
  data.values.forEach((item,i) => {
    option.legend.data[i] = {
      name:item.name,
      itemStyle:{
        color:option.color[i].colorStops[0].color
      }
    };
    option.series[i].name = item.name; 
    option.series[i].data = item.value; 
  })
  return option;
})
zjjstjEchart.updata(defZjjstjEchartData);

//助餐分类统计-预定
import ydIcon from "./img/yuding.png"
let defYdEchartData = [
  { name: "预定(特惠)", value: "0" },
  { name: "预定(普惠)", value: "0" },
]
const ydEchart = useEchart({
  tooltip: {
    ...tooltip,
    trigger: 'item'
  },
  color: [
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(41, 177, 254, .2)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(41, 177, 254, 1)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(255, 177, 60, 1)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(255, 177, 60, .2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    },
  ],
  legend: {
    show: true,
    type: 'scroll',
    icon: "circle",
    orient: "vertical",
    top: 180,
    left: 20,
    itemGap: 16,
    itemWidth: 8,
    itemHeight: 8,
    formatter: function (name) {
      let data = ydEchart.getChart().getOption().series[0].data;
      let total = 0;
      data.forEach(item => {
        total += parseInt(item.value);
      })
      let currentValue = data.find(item => item.name === name).value;
      return [
        `{name|${name}}`,
        `{v|${(currentValue || 0).toString().replace(/(?<=^\d*)(\d)(?=(?:\d{3})+(?:[^\d].+)?$)/g, '$1,')}}`,
        `{p|(${total == 0 ? 0 : parseFloat((currentValue / total * 100).toFixed(2))}%)}`,
      ].join('')
    },
    textStyle: {
      color: "#3F7DE5",
      fontSize: 14,
      rich: {
        name: {
          color: 'rgba(255,255,255,.7)',
          fontSize: 14,
          padding: [5, 0, 0, 5],
          width: 90
        },
        p: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        },
        v: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        }
      }
    },
  },
  graphic:{
    elements:[
      {
        type:"image",
        z:99,
        style: {
            image: ydIcon,
            width: 30,
            height: 30,
            opacity:.7
        },
        left: 'center',
        top:  '74',
      },
      {
        type:"text",
        z:99,
        style: {
            text: "堂食",
            font:"18px",
            fill:"#fff",
            textAlign:"center",
            textVerticalAlign :"middle",
        },
        left: 'center',
        top:  '84',
      },
    ]
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: [55, 72],
      center: ["50%", 90],
      // avoidLabelOverlap: false,
      label: {
        show: false,
        // alignTo: 'labelLine',
        // fontSize:40,
        // color:"rgba(193, 221, 255, 1)",
        // formatter: '{value|{c}({d}%)}\n{label|{b}}',
        // minMargin: 0,
        // edgeDistance: 0,
        // width:10,
        // height:10,
        // borderRadius:5,
        // borderColor:"#ff0",
        // backgroundColor:"#f00",
        // overflow:"none",
        // rich: {
        //   value:{
        //     fontSize: 40,
        //     color: '#B9CEE7',
        //     padding:[20,0,10,0]
        //   },
        //   label: {
        //     width:0,
        //     fontSize: 32,
        //     color: '#B9CEE7',
        //     marginTop:30,
        //     padding:[0,0,20,0]
        //   }
        // }
      },
      data: []
    },
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 360,
      radius: 64,
      center: ["50%", 90],
      zIndex:2,
      axisLine: {
        show:false,
      },
      splitLine: {
        show:false,
      },
      axisTick: {
        distance: 0,
        length: 5,
        lineStyle: {
          color: 'rgba(41, 177, 254, .7)'
        }
      },
      axisLabel: {
        show:false
      },
    },
  ]
}, (data, option) => {
  option.series[0].data = data;
  return option
})
ydEchart.updata(defYdEchartData);

//助餐分类统计-堂食
import tsIcon from "./img/tangshi.png"
let defTsEchartData = [
  { name: "堂食(特惠)", value: "0" },
  { name: "堂食(普惠)", value: "0" },
]
const tsEchart = useEchart({
  tooltip: {
    ...tooltip,
    trigger: 'item'
  },
  color: [
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(0, 138, 254, .2)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(0, 138, 254, 1)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'rgba(255, 129, 60, 1)' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(255, 129, 60, .2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    },
  ],
  legend: {
    show: true,
    type: 'scroll',
    icon: "circle",
    orient: "vertical",
    top: 180,
    left: 20,
    itemGap: 16,
    itemWidth: 8,
    itemHeight: 8,
    formatter: function (name) {
      let data = tsEchart.getChart().getOption().series[0].data;
      let total = 0;
      data.forEach(item => {
        total += parseInt(item.value);
      })
      let currentValue = data.find(item => item.name === name).value;
      return [
        `{name|${name}}`,
        `{v|${(currentValue || 0).toString().replace(/(?<=^\d*)(\d)(?=(?:\d{3})+(?:[^\d].+)?$)/g, '$1,')}}`,
        `{p|(${total == 0 ? 0 : parseFloat((currentValue / total * 100).toFixed(2))}%)}`,
      ].join('')
    },
    textStyle: {
      color: "#3F7DE5",
      fontSize: 14,
      rich: {
        name: {
          color: 'rgba(255,255,255,.7)',
          fontSize: 14,
          padding: [5, 0, 0, 5],
          width: 90
        },
        p: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        },
        v: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        }
      }
    },
  },
  graphic:{
    elements:[
      {
        type:"image",
        z:99,
        style: {
            image: tsIcon,
            width: 30,
            height: 30,
            opacity:.7
        },
        left: 'center',
        top:  '74',
      },
      {
        type:"text",
        z:99,
        style: {
            text: "预定",
            font:"18px",
            fill:"#fff",
            textAlign:"center",
            textVerticalAlign :"middle",
        },
        left: 'center',
        top:  '84',
      },
    ]
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: [55, 72],
      center: ["50%", 90],
      // avoidLabelOverlap: false,
      label: {
        show: false,
        // alignTo: 'labelLine',
        // fontSize:40,
        // color:"rgba(193, 221, 255, 1)",
        // formatter: '{value|{c}({d}%)}\n{label|{b}}',
        // minMargin: 0,
        // edgeDistance: 0,
        // width:10,
        // height:10,
        // borderRadius:5,
        // borderColor:"#ff0",
        // backgroundColor:"#f00",
        // overflow:"none",
        // rich: {
        //   value:{
        //     fontSize: 40,
        //     color: '#B9CEE7',
        //     padding:[20,0,10,0]
        //   },
        //   label: {
        //     width:0,
        //     fontSize: 32,
        //     color: '#B9CEE7',
        //     marginTop:30,
        //     padding:[0,0,20,0]
        //   }
        // }
      },
      data: []
    },
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 360,
      radius: 64,
      center: ["50%", 90],
      zIndex:2,
      axisLine: {
        show:false,
      },
      splitLine: {
        show:false,
      },
      axisTick: {
        distance: 0,
        length: 5,
        lineStyle: {
          color: 'rgba(41, 177, 254, .7)'
        }
      },
      axisLabel: {
        show:false
      },
    },
  ]
}, (data, option) => {
  option.series[0].data = data;
  return option
})
tsEchart.updata(defTsEchartData);

//助餐套餐统计
let defZctctjEchartData = [
  { name: "9元套餐", value: "0" },
  { name: "11元套餐", value: "0" },
  { name: "15元套餐", value: "0" },
  { name: "其他套餐", value: "0" },
]
const zctctjEchart = useEchart({
  tooltip: {
    ...tooltip,
    trigger: 'item'
  },
  color: ["rgba(6, 230, 182, 1)", "rgba(41, 177, 254, 1)", "rgba(255, 177, 60, 1)", "rgba(255, 129, 60, 1)"],
  legend: {
    show: true,
    type: 'scroll',
    icon: "circle",
    orient: "vertical",
    top: "middle",
    left: 230,
    itemGap: 16,
    itemWidth: 8,
    itemHeight: 8,
    formatter: function (name) {
      let data = zctctjEchart.getChart().getOption().series[0].data;
      let total = 0;
      data.forEach(item => {
        total += parseInt(item.value);
      })
      let currentValue = data.find(item => item.name === name).value;
      return [
        `{name|${name}}`,
        `{p|${total == 0 ? 0 : parseFloat((currentValue / total * 100).toFixed(2))}%}`,
        `{split||}`,
        `{v|${(currentValue || 0).toString().replace(/(?<=^\d*)(\d)(?=(?:\d{3})+(?:[^\d].+)?$)/g, '$1,')}}`,
      ].join('')
    },
    textStyle: {
      color: "#3F7DE5",
      fontSize: 14,
      rich: {
        name: {
          color: '#fff',
          fontSize: 16,
          padding: [5, 0, 0, 5],
          width: 90
        },
        p: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        },
        split:{
          color: 'rgba(88, 233, 255, 1)',
          padding:[0,10,0,10]
        },
        v: {
          color: 'rgba(88, 233, 255, 1)',
          fontSize: 16,
          padding: [5, 0, 0, 0],
        }
      }
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: [50, 82],
      center: [120, "50%"],
      // avoidLabelOverlap: false,
      label: {
        show: false,
        // alignTo: 'labelLine',
        // fontSize:40,
        // color:"rgba(193, 221, 255, 1)",
        // formatter: '{value|{c}({d}%)}\n{label|{b}}',
        // minMargin: 0,
        // edgeDistance: 0,
        // width:10,
        // height:10,
        // borderRadius:5,
        // borderColor:"#ff0",
        // backgroundColor:"#f00",
        // overflow:"none",
        // rich: {
        //   value:{
        //     fontSize: 40,
        //     color: '#B9CEE7',
        //     padding:[20,0,10,0]
        //   },
        //   label: {
        //     width:0,
        //     fontSize: 32,
        //     color: '#B9CEE7',
        //     marginTop:30,
        //     padding:[0,0,20,0]
        //   }
        // }
      },
      data: []
    },
    {
      name: '',
      type: 'pie',
      z: 8,
      radius: [50, 62],
      center: [120, "50%"],
      emptyCircleStyle: {
        color: "rgba(0,0,0,.4)",
      },
      data: []
    },
  ]
}, (data, option) => {
  option.series[0].data = data;
  return option
})
zctctjEchart.updata(defZctctjEchartData);



//中间地图
import {DrawGraph, coordinatesJson} from '@/DrawGraph/index';
const marks = ref(coordinatesJson);
const selectMarker = ref(null);
const map = ref(null);
function initMap(dom){
  let drawGraph = new DrawGraph(dom);
  let option = {
    coordinateData: coordinatesJson,
    label: {
      show: false,
      color: "#fff",
      fontSize: 14,
      fontStyle: "italic",
      fontWeight: "bold",
      lineHeight:20,
    },
    itemStyle: {
      borderColor:"rgba(0,0,0,0)",
    },
    emphasis: {
      label: {
        
        color: "#ffac0a",
        fontSize: 18,
      },
      itemStyle: {
        borderWidth: 0,
        borderColor:"rgba(0,0,0,0)",
        // backgroundColor:"rgba(155,0,155)",
        backgroundColor: "#22FDFA99",
        // opacity:.66
      },
    },
    data: []
  };
  drawGraph.init(option);
  let onclick = null,
      onmouseover = null;
  drawGraph.onclick = e => {
    onclick && onclick(e);
  };
  drawGraph.onmouseover = e => {
    onmouseover && onmouseover(e);
  };
  let onclick2 = null,
      onmouseover2 = null;
  drawGraph.onclick2 = e => {
    onclick2 && onclick2(e);
  };
  drawGraph.onmouseover2 = e => {
    onmouseover2 && onmouseover2(e);
  };
  return {
    setSelectName(name) {
      option.data = [
        {
          name,
          selected: true,
          label: {
            // color:"#ff0",
            color: "#ffac0a",
            fontSize: 18,
          },
          itemStyle: {
            borderWidth:3,
            // borderColor:"#fff",
            // backgroundColor:"#f00"
            borderColor:"rgba(255, 177, 60, 1)",
            backgroundColor: "rgba(255, 177, 60, .3)",
          },
          emphasis: {
            label: {
              // color:"#c9cc0b",
              color: "#ffac0a",
              fontSize: 18,
            },
            itemStyle: {
              // borderWidth:10,
              // borderColor:"#fff",
              borderColor:"rgba(255, 177, 60, 1)",
              backgroundColor: "rgba(255, 177, 60, .3)",
            },
          },
        }
      ]
      drawGraph.init(option);
    },
    onclick(callback) {
      onclick = callback;
    },
    onclick2(callback) {
      onclick2 = callback;
    },
    onmouseover(callback) {
      onmouseover = callback;
    },
    onmouseover2(callback) {
      onmouseover2 = callback;
    }
  };
}
let Map = null;
let selectName = "";
function outMap(){
  Map && Map.setSelectName(selectName);
}
function nextMarker(e){
  if(selectName != e.name){
    Map.setSelectName(e.name);
    selectName = e.name;
    selectMarker.value = e
    // update({
    //   afCompanyId:e.code
    // })
  }else{
    selectMarker.value = null
    selectName = "";
    Map.setSelectName("");
    update({})
  }
}
onMounted(() => {
  Map = initMap(map.value);
  // Map.onmouseover((e) => {
      // if(selectName != e.name){
      //   Map.setSelectName(e.name);
      // }
      // selectName = e.name;
      // this.nextSelectMarker(e);
  // })
  // map.onmouseover2((e) => {
  //     if(this.selectMarker){
  //         map.setSelectName(selectName)
  //         this.selectMarker = null;
  //     };
  // })
  Map.onclick(nextMarker)
  nextMarker(coordinatesJson[0])
})
const markerArr = reactive([
  {
    x: 370,
    y:320,
    name: "幸福在嘉养老服务公司",
    data1: 845,
    data2: 1251,
    data3: 211251,
  },
  {
    x: 620,
    y: 580,
    name: "颐养伦养老服务公司",
    data1: 345,
    data2: 2253,
    data3: 324233,
  },
  {
    x: 710,
    y: 300,
    name: "怡居康养服务有限公司",
    data1: 565,
    data2: 1827,
    data3: 32344,
  }
])
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
